<template>
  <div class="app-container table-container">
    <el-row>
      <el-col :span="24">
        <el-col :span="20">
       <el-form ref="queryForm" :model="searchDate" :inline="true" label-width="68px">
          <el-form-item label="退票状态">
            <el-select v-model="searchDate.handleState" filterable placeholder="请选择退票状态" size="small">
              <el-option
                v-for="kinds in recedeValues"
                :key="kinds.code"
                :label="kinds.name"
                :value="kinds.name"
              >{{ kinds.name }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退票时间">
            <el-date-picker
              v-model="searchDate.purchaseDate"
              filterable
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="changeAuditState"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @cliclk="queryRecede">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="restart">重置</el-button>
          </el-form-item>


    </el-form>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="medium" @click="exportAble" >导出
        </el-button>
        </el-col>
      </el-col>
    </el-row>
    <el-col>



    </el-col>
    <!--        <el-col>-->
    <!--            <label>商户:</label>-->
    <!--            <el-select filterable placeholder="请选择商户" @change='changeYard' style="width:150px" v-model="defaultAuditState">-->
    <!--                <el-option v-for="(ky,val) in auditState" :key="ky" :label="ky" :value="val"></el-option>-->
    <!--            </el-select>-->
    <!--        </el-col>-->
    <!--        <span>请选择</span>-->
    <!--        <el-select  filterable placeholder="请选择票务信息" @change='getTictValue'>-->
    <!--            <el-option-->
    <!--                    v-for="item in tictData"-->
    <!--                    :key="item.code"-->
    <!--                    :label="item.name"-->
    <!--                    :value="item.name">-->
    <!--                {{item.name}}-->
    <!--            </el-option>-->
    <!--        </el-select>-->
    <el-table
      :data="orderData"
      size="mini"
      border
      fit
      :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
      style="font-size: 16px;"
    >
      <el-table-column prop="orderId" label="订单号" min-width="70" />
      <el-table-column prop="tictName" label="票务名称" min-width="50" />
      <el-table-column prop="tictKind" label="票务种类" min-width="50" />
      <el-table-column prop="buyTime" label="购票时间" min-width="50" >
        <template slot-scope="scope">
          {{parseTime(scope.row.buyTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="useTime" label="使用时间" min-width="70">
      <template slot-scope="scope">
        {{parseTime(scope.row.useTime)}}
      </template>
      </el-table-column>
      <el-table-column prop="applyTime" label="退票申请时间" min-width="70">
      <template slot-scope="scope">
        {{parseTime(scope.row.applyTime)}}
      </template>
      </el-table-column>
      <el-table-column prop="handleTime" label="退票处理时间" min-width="70">
      <template slot-scope="scope">
        {{parseTime(scope.row.handleTime)}}
      </template>
      </el-table-column>
      <el-table-column width="180" fixed="right" label="操作" prop="handleState">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.handleState==='TCK_RECECDE3'"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="lookTict( scope.row )"
          >处理
          </el-button>
          {{ scope.row.handleState === 'TCK_RECECDE1' ? '通过' : '' }}
          {{ scope.row.handleState === 'TCK_RECECDE2' ? '未通过' : '' }}
        </template>
      </el-table-column>

    </el-table>

    <el-row type="flex" justify="left" class="pagination">
      <el-pagination
        background
        :current-page="orderPage.currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="orderPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderPage.totalElements"
        @size-change="userSize"
        @current-change="pgChge"
      />
    </el-row>
    <!--        <transition name="el-fade-in">-->
    <!--            <floatingBox v-show="lookBoxShow">-->
    <!--                <lookTict v-if="lookShow" slot="edit" :tictUuid="uuid" @editState="editstate"></lookTict>-->
    <!--            </floatingBox>-->
    <!--        </transition>-->
    <div v-if="editDialogVisible">
    <el-dialog
      :before-close="cancelEditDlg"
      title="退票处理"
      :visible.sync="editDialogVisible"
      width="60%"
      append-to-body
    >
      <lookTict ref="lookTict" :tict-uuid="currentEdituuid" @close="closeDialog"  />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="agreeEditDlg">同 意</el-button>
        <el-button type="primary" @click="refuseditDlg">拒 绝</el-button>
        <el-button @click="cancelEditDlg">返 回</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import { getDataForSP, writePageInfo } from '../../../utils/webUtils.js'
import lookTict from './recedeDetailList.vue'

export default {
  name: 'Orderlist',
  components: { lookTict },
  data() {
    return {
      editDialogVisible: false,
      currentEdituuid: '',
      formAlignLeft: 'left',
      editBoxShow: false,
      addShow: false,
      editShow: false,
      pwdShow: false,
      userSchOn: '',
      userEdit: false,
      lookBoxShow: false,
      lookShow: false,
      uuid: '',
      recedeValues: [],
      orderData: [],
      searchDate: {
        handleState: '',
        purchaseDate: []
      },
      defaultAuditState: '',
      orderPage: {
        pageSize: 10, // 每页显示条目个数
        currentPage: 1, // 当前页数
        totalElements: 0,
        searchData: {
          handleState: '',
          startTime: '',
          endTime:''
        }
      }
    }
  },
  created(){
    this.queryRecede(this.searchDate)
  },
  mounted() {
    // 默认展示审核中的数据

    this.queryRecedeType()
  },
  methods: {
    closeDialog(){
      this.editDialogVisible = false
      this.queryRecede(this.searchDate)
    },
    agreeEditDlg() {
      this.$refs.lookTict.submit("TCK_RECECDE1")
    },
    refuseditDlg(){
      this.$refs.lookTict.submit("TCK_RECECDE2")
    },
    cancelEditDlg() {
      this.editDialogVisible = false
    },
    queryRecedeType() {
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/TCK_RECEDE',
          params: {}
        })
        .then(response => {
          this.recedeValues = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 导出
    exportAble() {
      window.location.href = this.axios.defaults.baseURL+'/tck/order/refund-history/export';
    },
    lookTict(val) {
      this.currentEdituuid = val.id
      this.editDialogVisible = true
    },
    //查询重置
    restart(){
    this.searchDate.handleState=''
      this.searchDate.purchaseDate='';
    this.queryRecede(this.searchDate)
    },
    // 查询
    changeAuditState() {
      this.queryRecede(this.searchDate)
    },
    // 获取所有数据
    queryRecede(param) {
      // 退票状态
     this.orderPage.searchData.handleState=param.handleState
      // 退票时间
      if(param.purchaseDate!=null&&param.purchaseDate!=''&&param.purchaseDate.length>=2){
        this.orderPage.searchData.startTime=(param.purchaseDate)[0];
        this.orderPage.searchData.endTime=(param.purchaseDate)[1];
      }
      this.axios.request({
        method: 'get',
        url: './tck/order/refund-history/findAll',
        params: getDataForSP(this.orderPage)
      }).then(response => {
        this.orderData = response.data.data
        writePageInfo(this.orderPage, response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    // 列表分页
    userSize: function(pageSize) {
      this.orderPage.pageSize = pageSize
      if (this.orderPage.currentPage === 1) {
        if (this.userSchOn !== '') {
          // this.userSearch();
        } else {
          this.queryRecede(this.searchDate)
        }
      }
      this.orderPage.currentPage = 1
    },
    pgChge(currentPage) {
      this.orderPage.currentPage = currentPage
      this.queryRecede(this.searchDate)
    }
  }
}
</script>

<style scoped lang="scss">
  @import "@/styles/table.scss";
  .app-container{
  .pagination{
    padding: 10px 0;
  }
  }

</style>
